<!-- @format -->
<script setup>
	import { ref } from 'vue'
	import MyTable from './components/MyTable.vue'
	import MyTag from './components/MyTag.vue'

	// 商品列表
	const goodsList = ref([
		{
			id: 101,
			picture:
				'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
			name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',
			tag: '茶具'
		},
		{
			id: 102,
			picture:
				'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
			name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',
			tag: '男鞋'
		},
		{
			id: 103,
			picture:
				'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
			name: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm',
			tag: '儿童服饰'
		},
		{
			id: 104,
			picture:
				'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',
			name: '基础百搭，儿童套头针织毛衣1-9岁',
			tag: '儿童服饰'
		}
	])
</script>
<template>
	<MyTable :data="goodsList">
		<template #thead>
			<th>封面</th>
			<th>序号</th>
			<th>名字</th>
			<th>操作</th>
		</template>
		<template #default="{ row, i }">
			<td>
				<img
					:src="row.picture"
					alt="picture" />
			</td>
			<td>{{ i + 1 }}</td>
			<td>{{ row.name }}</td>
			<td>
				<MyTag v-model="row.tag" />
			</td>
		</template>
	</MyTable>
</template>

<style lang="scss">
	#app {
		width: 1000px;
		margin: 50px auto;
		img {
			width: 100px;
			height: 100px;
			object-fit: contain;
			vertical-align: middle;
		}

		td:last-child {
			width: 150px;
		}
	}
</style>
